<template>
    <ul class="sec_box" @scroll="scrollFn">
        <li v-for="item in secondkilllist" :key="item.proid">
            <img :src="item.img1" alt="">
            <p>${{ item.originprice }}元</p>
        </li>
    </ul>
</template>

<script>
// 导入秒杀接口
import { getSecondkilllist } from '@/api/home';
export default {
    data() {
        return {
            count: 1, // 秒杀列表数据页数
            secondkilllist: [] // 秒杀列表数组
        }
    },
    created() {
        // 秒杀列表数据请求
        this.getSecondkilllistFn()
    },
    methods: {
        scrollFn(e) {
            // console.log('scroll');
            // console.log(e);
            let { scrollWidth, scrollLeft, clientWidth } = e.target;
            //console.log(scrollWidth, scrollLeft, clientWidth);
            if (scrollWidth - scrollLeft - 1 <= clientWidth) {
                // 说明到最右端, 当前页数+1, 重新请求页数
                // console.log(this.$parent);
                this.count++;
                this.getSecondkilllistFn()

            }
        },
        getSecondkilllistFn() {
            getSecondkilllist({
                count: this.count,
                limitNum: 6
            }).then(res => {
                // console.log(res);
                this.secondkilllist = this.secondkilllist.concat(res.data)
            })
        }
    }
}
</script>
<style lang="less" scoped>
.sec_box {
    display: flex;
    overflow-x: auto;

    li {
        display: flex;
        flex-direction: column;
        padding: 2px;
        box-sizing: border-box;
        flex: none;
        width: 70px;

        img {
            height: 70px;
            width: 66px;
            display: block;
        }

        p {
            font-size: 14px;
            color: red;
            text-align: center;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
    }
}

.sec_box::-webkit-scrollbar {
    display: none;
}
</style>